<template>
  <div style="height: 100%">
    <navbar :title="$t('cos_type_map')"></navbar>
    <div class="content-noBottom">
      <div class="view-body">
        <!--筛选-->
        <div class="header-select">
          <van-dropdown-menu active-color="#075ebb">
              <van-dropdown-item :title="typeTitle" v-model="selectedType" :options="typeOf" @change="selectType()"/>
            </van-dropdown-menu>
        </div>
    <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
    <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
      <van-list
      v-model="isLoading"
      :finished="finished"
      :finished-text="(finished&&total>0) ? $t('no_more') : ''"
      loding-text="loading"
      @load="getStudyMapList"
      >
        <div v-bind:class="{'height100' : total === 0}">
          <ul class="module-list-07" v-if="total > 0">
            <div class="module-box-30">
              <ul>
                <li class="white-bg bottom-shadow clearfix" v-for="info in mapData" :key="info.itmId" style="position: relative" @click="enterDetail(info.itmId, info.itmTitle)" >
                    <div style="display: flex;">
                      <div class="map-imag">
                        <img :src="appUrl +info.itmIcon" alt="">
                      </div>
                      <div class="map-title-container">
                        <p class="font-size16">{{ info.itmTitle }}</p>
                        <p class="color999">{{ info.itmPublishTime }}</p>
                        <p>{{info.totalLearner? info.totalLearner : 0}} {{$t('lab_learning')}} </p>
                      </div>
                    </div>
                </li>
              </ul>
            </div>
          </ul>
          <!--暂无数据-->
          <div v-if="!isLoading && total === 0" style="height:100%;">
            <div class="box-table" style="width:100%;height:100%;">
              <div class="box-table-cell" style="text-align: center;">
                <div class="no-data">
                  <img src="../../../static/images/no-data.png" alt=""/>
                  <p class="color999">{{ $t('no_data') }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
 </div>
</div>
    <common-loading :isLoading="isLoading"></common-loading>
  </div>
</template>

<script>
export default {
    name: 'list',
    data() {
        return {
            selectTypeSwitch: false,
            selectedType: '',
            pageSize: 10,
            pageNo: 1,
            total: 0, //总数
            isLoading: true,
            mapData: [], //学习地图数据
            totalPage: 0, //总分页数
            typeOf: [
                {value: 'all', text: this.$t('type_all_title')}, //全部
                {value: 'yes', text: this.$t('study_map_intrude')}, //闯关模式
                {value: 'no', text: this.$t('study_map_no_intrude')} //非闯关模式
            ],
            types: {
                All: this.$t('type_all_title'),
                yes: this.$t('study_map_intrude'),
                no: this.$t('study_map_no_intrude')
            },
            finished: false,
            isRefresh: false,
            typeTitle: this.$t('knowledge_type')
        };
    },
    methods: {
        selectType() {
            // this.selectedType = type;
            //重新请求数据
            this.pageNo = 1;
            this.total = 0;
            this.mapData = [];
            this.typeTitle = this.types[this.selectedType];
            this.isLoading = true;
            this.getStudyMapList('refresh');
            this.selectTypeSwitch = false;
        },
        /*@不虎新接口 返回学习地图列表*/
        getStudyMapList(option) {
            let tempData = {
                passThroughType: this.selectedType
            };
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/course/map/list`,
                params: {pageNo: this.pageNo, pageSize: this.pageSize},
                data: tempData
            }).then(res => {
                if (res && res.status === 200) {
                    if (res.data && res.data.results) {
                        if (option === 'refresh') {
                            this.mapData = res.data.results;
                        } else {
                            this.mapData = [...this.mapData, ...res.data.results];
                        }
                    }
                    this.totalPage = res.data.totalPage;
                    this.total = res.data.totalRecord;
                    this.isLoading = false;
                    this.pageNo++;
                    if (this.mapData && this.mapData.length >= this.total) {
                        this.finished = true;
                    }
                }
            });
        },
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.pageNo = 1;
                this.getStudyMapList('refresh');
                this.isRefresh = false;
            }, 900);
        },
        /*跳转详情页面*/
        enterDetail(itmId, title) {
            this.$router.push({path: '/studyMapDetail', query: {itmId, title}});
        }
    },

    mounted() {
        this.getStudyMapList('refresh');
    }
};
</script>

<style scoped lang="less">
  .module-box-30 {
    margin: 15px 15px 0 ;
    ul {
      li {
        margin-bottom: 12px;
        padding: 20px 15px;
        background: #ffffff;
        border-radius: 4px;
      }
    }
    .map-imag{
      width: 50%;
      max-width: 50%;
      height: 80px;
      background: #c9c9c9;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .map-title-container{
      height: 100%;
      max-width: 45%;
      margin-left: 10px;
      p:last-child{
        margin-bottom: 0;
      }
      p{
        margin-bottom: 10px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
      }
    }
  }

</style>
